<template>
    <div class="p-2">
        <div class="scroll-container">
            <div class="scroll-content">
                <TreeChart :json="treeData" />
            </div>
        </div>
    </div>
</template>

<script setup>

import {getFamilyTree} from '@/api/genealogy/name';
import TreeChart from "vue-tree-chart-3";
import { useGenealStore } from '@/store/modules/genealogy';
  
const genealStore = useGenealStore();
const treeData = ref(null);

//加载族员树结构
const getTreeData = async (node) => {
    const res = await getFamilyTree({geId:genealStore.genealId});
    if(res.data){
        treeData.value = res.data;
        let classAry = [];
        classAry.push("rootNode");
        //root设置样式
        treeData.value.class = classAry
    }
}

onMounted(() =>{
    getTreeData(null);
})
</script>

<style scoped>
    /* 基础样式 */
    .scroll-container {
        /* 设置固定宽度，超出部分将滚动 */
        width: 100%;
        position: fixed;
        top: 0;
        height: 100%;
        background-color: #f8f9fa;
        border-top: 1px solid #e9ecef;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
        
        /* 横向滚动设置 */
        overflow-x: auto;
        scrollbar-width: thin;
        scrollbar-color: #888 #f1f1f1;
    }
    
    /* 内容容器 */
    .scroll-content {
        /* 内容宽度需要大于容器宽度才会出现滚动条 */
        width: 150%;
        padding: 20px;
        white-space: nowrap; /* 防止内容换行 */
    }
</style>